<template>
    <view class="lips" @click="openTips">
		
	</view>
	<!-- 弹框 -->
	<view v-if="isShowTips" class="tips-popup" @click.self="closeTips">
	    <view class="tips-content">
			<view class="tips-content-text" :style="{top:tipsContentTextTop + 'px'}">
				君不知黄河之水天上来，分流到海不复回
			</view>
	    </view>
	</view>
</template>

<script>
export default {
    name: 'MyComponent',
    props: {
	    EndPosition:{
			type:String,
			default:'50%'
	    },
		DownDirection: {
			type: String,
			default: 'fallSwayOne'
		},
	},
	data() {
		return {
			isShowTips: false,
			tipsContentTextTop: 0
		};
	},
    mounted() {
           console.log('EndPosition:', this.EndPosition);
           console.log('DownDirection:', this.DownDirection);
		   console.log(1111,uni);
		   const systemInfo = uni.getSystemInfoSync();
		   this.tipsContentTextTop =  systemInfo.windowWidth; //顶部距离测试
    },
	methods:{
		 openTips(){
			this.isShowTips = true;
			console.log('isShowTips:', this.isShowTips); // 打开弹窗时打印
		 },
		 closeTips() {
		    this.isShowTips = false;
			console.log('isShowTips:', this.isShowTips); // 关闭弹窗时打印
		}
	}
}
</script>

<style scoped>
/* 组件样式 */
.lips {
  position: absolute;
  top: -3rem; /* 初始位置在屏幕顶部上方 */
  width: 3rem;
  height: 3rem;
  background-image: url('https://assets-img.ezrpro.com/pc/img/act/lipsHome.png');
  background-size: 100%;
  background-repeat: no-repeat;
  animation: fallSwayOne 4s linear forwards; /* 应用动画，持续 5 秒，线性变化，动画结束后保持最终状态 */
}

/* 弹窗样式 */
.tips-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleIn 0.3s ease-out; /* 应用弹窗动画 */
}

.tips-content {
    background-image: url('https://assets-img.ezrpro.com/pc/img/act/lipsHome.png');
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
}

.tips-content-text{
	width: 70%;
	min-height: 10rem;
	color: darkolivegreen;
	font-family: 'STXingkai', cursive;
	text-indent: 2em;
	background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
	position: absolute;
	left: 15%;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	animation: fadeIn 1s ease-out forwards;
}

/* 弹窗由大到小的放大动画 */
@keyframes scaleIn {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fallSwayOne {
  0% {
    top: -3rem;
    left: 50%;
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 100deg);
  }
  25% {
    top: 25vh;
    left: 20%; /* 向左偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 300deg);
  }
  50% {
    top: 50vh;
    left: 80%; /* 向右偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 120deg);
  }
  75% {
    top: 75vh;
    left: 20%; /* 再次向左偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 250deg);
  }
  100% {
    top: 85vh;
    left: 50%;
    transform: translateX(-50%) rotate3d(1 ,0, 0,140deg);
  }
}

@keyframes fallSwayTwo {
  0% {
    top: -3rem;
    left: 50%;
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 100deg);
  }
  25% {
    top: 25vh;
    left: 20%; /* 向左偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 300deg);
  }
  50% {
    top: 50vh;
    left: 80%; /* 向右偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 120deg);
  }
  75% {
    top: 75vh;
    left: 20%; /* 再次向左偏移 */
    transform: translateX(-50%) rotate3d(0.5, 0.5, 0.5, 250deg);
  }
  100% {
    top: 85vh;
    left: 50%;
    transform: translateX(-50%) rotate3d(1 ,0, 0,140deg);
  }
}

@keyframes fadeIn {
	0%{
		opacity: 0;
		transform: translateY(-6vh);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
</style>